<template>
  <div class="Hospitals_stn">
    <div class="center">
      <p class="img"><img src="../assets/Hospital stn_4.png" alt="" /></p>
      <div class="products">
        <div class="title">
          <div>医</div>
          <div>院</div>
          <div>介</div>
          <div>绍</div>
        </div>
        <div class="content">
          <div class="left">
            <img :src="doctor.thumb" alt="" class="doctor_img" />
          </div>
          <div class="right">
            <p>
              <span class="tit">医师姓名</span>:<span class="text">{{
                doctor.name
              }}</span>
            </p>
            <p>
              <span class="tit">所在科室</span>:<span class="text">{{
                doctor.jibing1_id
              }}</span>
            </p>
            <p>
              <span class="tit">工作医院</span>:<span class="text">{{
                doctor.yiyuan_id
              }}</span>
            </p>
            <p>
              <span class="tit">职称</span>:<span class="text">{{
                doctor.zhicheng
              }}</span>
            </p>
            <p>
              <span class="tit">擅长疾病</span>:<span class="text">{{
                doctor.shanchangjibing
              }}</span>
            </p>
            <p>
              <span class="tit">出诊时间</span>:<span class="text"
                >{{ doctor.stime }}-{{ doctor.etime }}预约初诊</span
              >
            </p>
          </div>
        </div>
      </div>
      <div class="products">
        <div class="title">
          <div>医</div>
          <div>院</div>
          <div>信</div>
          <div>息</div>
        </div>
        <div class="content">
          <div class="left">
            <img :src="thumb" alt="" />
          </div>
          <div class="right">
            <p>
              <span class="tit">医院QQ</span>:<span class="text">{{ qq }}</span>
            </p>
            <p>
              <span class="tit">联系电话</span>:<span class="text">{{
                phone
              }}</span>
            </p>
            <p>
              <span class="tit">医院地址</span>:<span class="text">{{
                address
              }}</span>
            </p>
            <p>
              <span class="tit">医院网址</span>:<span class="text">{{
                wangzhi
              }}</span>
            </p>
          </div>
        </div>
      </div>
      <p class="img"><img src="../assets/Hospital stn_4.png" alt="" /></p>
    </div>
  </div>
</template>
<script>
import axios from "axios";
// import $ from 'jquery'
export default {
  data: function() {
    return {
      doctor: [],
      thumb: "",
      qq: "",
      phone: "",
      address: "",
      wangzhi: "",
    };
  },
  mounted: function() {
    axios.all([
      axios.get("/yisheng/yisheng").then((res) => {
        this.doctor = res.data.data;
      }),
      axios.get("/index/yiyuan").then((res) => {
        this.thumb = res.data.data[0].thumb;
        this.phone = res.data.data[0].phone;
        this.qq = res.data.data[0].qq[0];
        this.address = res.data.data[0].address;
        this.wangzhi = res.data.data[0].wangzhi;
        console.log(res.data.data);
      }),
    ]);
  },
};
</script>
<style scoped>
img {
  width: 100%;
}
.Hospitals_stn {
  background: #fbe7d9;
}
.img {
  text-align: center;
  padding: 72px 0px 51px 0px;
}
.title {
  width: 100%;
  display: flex;
  justify-content: center;
}
.title:nth-child(1) {
  margin-top: 97px;
}
.doctor_img {
  width: 156px;
  height: 205px;
  margin: 0 auto;
}
.title div {
  width: 70px;
  line-height: 70px;
  background-color: #a40100;
  text-align: center;
  font-size: 38px;
  font-family: "楷体";
  color: white;
  border-radius: 35px;
  margin-right: 10px;
}
.content {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 63px;
}
.content .left {
  width: 275px;
  text-align: center;
}
.content .right {
  width: 30%;
  margin-left: 73px;
  font-size: 24px;
}
.content img:first {
  width: 156px;
  height: 205px;
}
.content img:last {
  width: 274px;
  height: 160px;
}
.content .right p {
  padding-bottom: 20px;
  color: #9e290b;
  font-weight: bold;
  display: flex;
  justify-content: left;
}
.content .right .tit {
  width: 8rem;
  display: inline-block;
  text-align: justify;
  text-align-last: justify;
}
.content .right .text {
  margin-left: 40px;
  color: #666666;
  font-weight: normal;
  white-space: pre-wrap;
  width: 70%;
}
</style>
